<script lang="ts">
import type { GunCunJiLu } from '~/api/services/main.api';
import type { TColumn } from '~/components/table';
// import { valueOfRangePickerProps } from '~comp/antd-assist';
import { RangeMonth } from '~/components-business/range';
import { CloseBtn } from '~/components/card';
import { useLockTypeAndStatu } from '../../ts/useLockTypeAndStatu';
import { dateToDayjs } from '../../ts/utils';
import Details from './Details.vue';

export const lockRecordPopup = useAntdModal({
  // eslint-disable-next-line import/no-self-import
  is: defineAsyncComponent(() => import('./index.vue')),
  type: 'modal',
}, { width: 500, wrapClassName: 'ant-cover__Modal-drawer', centered: true, zIndex: 11, destroyOnClose: true });

export interface LockRecordProps {
  startTime?: number | ReturnType<typeof dayjs>;
  endTime?: number | ReturnType<typeof dayjs>;
  type?: 1 | 2;
  status?: 1 | 2 | 3 | 4 | 5;
  onClose?: () => void;
};
</script>

<script setup lang="ts">
const props = defineProps<LockRecordProps>();

const { getTypeOptionsRef, getStatuOptionsRef, getText, RenderStatu } = useLockTypeAndStatu();

function getTimeValues() {
  const defVal = [dayjs().subtract(30, 'day').valueOf(), dayjs().valueOf()];
  const { startTime, endTime } = props;

  const start = typeof startTime === 'number' ? dayjs(startTime > 0 ? startTime : 'kkkkk') : startTime;
  const end = typeof endTime === 'number' ? dayjs(endTime > 0 ? endTime : 'kkkkk') : endTime;

  if (!start || !end || !start.isValid() || !end.isValid() || start.isAfter(end)) {
    return defVal;
  }
  return [start.valueOf(), end.valueOf()];
}

const [listQry, listParams] = useFilterPaginationQuery(apis.apiFundDepositScrollRecord, {
  // start_time: { value: dayjs().startOf('month').valueOf(), responsive: true },
  // end_time: { value: dayjs().endOf('month').valueOf(), responsive: true },
  start_time: {
    value: dayjs().startOf('month').utc(true).valueOf(),
    responsive: true,
  },
  end_time: {
    value: dayjs().endOf('month').utc(true).valueOf(),
    responsive: false,
  },
  type: { value: [1, 2].includes(props.type || 888) ? props.type : undefined, responsive: true },
  status: { value: [1, 2, 3, 4, 5].includes(props.status || 888) ? props.status : undefined, responsive: true },
});

const tableColumns = computed((): TColumn[] => [
  { key: 'type', name: $t('heQuc0Jy49iat3t6u5Cdw'), thClass: '!text-left !bg-sys-layer-a !pb-0' },
  { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), thClass: '!text-right !bg-sys-layer-a !pb-0', tdClass: 'text-right' },
]);

const tableData = computed(() => listQry?.data?.value?.list ?? []);

const isIndexPage = ref(true);

function updateList() {
  listQry.refetch();
  backIndexPage();
}

function backIndexPage() {
  isIndexPage.value = true;
  detailDataRef.value = void 0;
}

function close() {
  props.onClose?.();
  backIndexPage();
}

const detailDataRef = ref<GunCunJiLu>();

function clickRow(row: GunCunJiLu) {
  detailDataRef.value = row;
  isIndexPage.value = false;
}
</script>

<template>
  <div
    class="pointer-events-auto relative w-full flex flex-col rounded-lg px-5 py-4 lt-mobilel:(h-$dfvh p-3) !bg-sys-layer-c"
  >
    <div class="mb-3 flex-between">
      <div v-if="isIndexPage" class="text-lg font-semibold">
        {{ $t('mzDhmaivuOccvVlWlamUa') }}
      </div>
      <div v-else class="flex cursor-pointer items-center gap-x-1.5 text-lg font-semibold" @click="backIndexPage">
        <i class="i-ep:arrow-left-bold text-sys-head h-4.5 w-4.5" />
        <div>{{ $t('ikjFgtUmfJjqycgVyOeFt') }}</div>
      </div>
      <CloseBtn @click="close" />
    </div>

    <div class="flex-1">
      <div v-show="isIndexPage">
        <div class="flex gap-3 lt-mobilel:gap-1">
          <!-- <ARangePicker
            v-bind="valueOfRangePickerProps(listParams)"
            class="min-w-38"
            inputReadOnly
            format="MM-DD"
          /> -->
          <RangeMonth
            v-model:startTime="listParams.start_time"
            v-model:endTime="listParams.end_time" :bordered="false"
            size="small" :virtual="false" class="min-w-38"
          />

          <ASelect
            v-model:value="listParams.type"
            class="min-w-30 lt-mobilel:min-w-unset"
            :placeholder="$t('ufcZwcQsF8cdsOzyaZc')"
            allowClear
            :options="getTypeOptionsRef"
            :dropdownMatchSelectWidth="false"
            :listHeight="300"
          >
            <template #option="{ label }">
              <div class="max-w-90 truncate lt-mobile:max-w-[86vw]">
                {{ label }}
              </div>
            </template>
          </ASelect>
          <ASelect
            v-model:value="listParams.status"
            class="min-w-30 lt-mobilel:min-w-[unset]"
            :placeholder="$t('xloaZjK9J6MoD2EybiBw')"
            allowClear
            :options="getStatuOptionsRef"
            :dropdownMatchSelectWidth="false"
            :listHeight="300"
          >
            <template #option="{ label }">
              <div class="max-w-90 truncate lt-mobile:max-w-[86vw]">
                {{ label }}
              </div>
            </template>
          </ASelect>
        </div>
        <div class="max-h-82 min-h-48 overflow-y-auto lt-mobilel:(max-h-[87.5vh] min-h-[unset])">
          <TCard class="my-3 !p-0">
            <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" outRender>
              <TTable indexId="order_no" :columns="tableColumns" :data="tableData" rowClass="cursor-pointer" @clickRow="clickRow">
                <template #type-td="{ row }">
                  <div class="text-sys-text-head">
                    {{ getText(row.type) }}
                  </div>
                  <div v-if="row?.create_time" class="mt-0.5 text-sys-text-body">
                    {{ dateToDayjs(row.create_time)?.format('M/D/YYYY h:mm:ss A') }}
                  </div>
                </template>

                <template #amount-td="{ row }">
                  <div class="flex flex-col items-end gap-0.5">
                    <TAmount
                      class="text-green-500"
                      :class="{ '!text-white': row.amount.indexOf('-') > -1 || row.amount === '0' }"
                      showPos
                      :value="row.amount"
                      :symbol="row?.currency?.currency"
                      iconPos="right"
                      colored="inherit"
                      format="pad-dec"
                    />
                    <RenderStatu :statu="row?.status" />
                  </div>
                </template>
              </TTable>

              <template #pending>
                <div class="grid grid-cols-1 w-full gap-3">
                  <TSkeleton class="grid grid-cols-2 w-full">
                    <TSkeleton class="mb-0.5" type="text" :length="3" />
                    <TSkeleton class="mb-0.5 text-right" type="text" :length="13" />
                    <TSkeleton type="text" :length="12" />
                    <TSkeleton class="text-right" type="text" :length="4" />
                    <TSkeleton class="col-span-full mt-3" type="rect" height="1px" />
                  </TSkeleton>
                  <TSkeleton class="grid grid-cols-2 w-full">
                    <TSkeleton class="mb-0.5" type="text" :length="8" />
                    <TSkeleton class="mb-0.5 text-right" type="text" :length="8" />
                    <TSkeleton type="text" :length="12" />
                    <TSkeleton class="text-right" type="text" :length="4" />
                    <TSkeleton class="col-span-full mt-3" type="rect" height="1px" />
                  </TSkeleton>
                </div>
              </template>
            </TSuspenseView>
          </TCard>

          <TPagination
            v-model:page="listParams.page"
            v-model:pageSize="listParams.page_size"
            :querier="listQry"
          />
        </div>
      </div>
      <Details v-if="!isIndexPage" :detailData="detailDataRef" :updateList="updateList" :onClose="onClose" />
    </div>
  </div>
</template>
